.container {
  height: 100%;
  overflow-y: auto;
}

.header-before {
  position: absolute;
  width: 100%;  
  height: 100%;
  filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#2fb790,endcolorstr=#66c1a8,gradientType=0);
  -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#2fb790,endcolorstr=#66c1a8,gradientType=0);/*IE8*/	
  background:#2fb790; /* 一些不支持背景渐变的浏览器 */  
  background: -moz-linear-gradient(top, #2fb790, #66c1a8);  
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2fb790), to(#66c1a8));  
  background: -o-linear-gradient(top, #2fb790, #66c1a8); 
  z-index: -1;
}

.header {
  width: 100%;  
  height: 6rem;
  background: url('//fs.andylistudio.com/perhelp/v1/share_bg.png') no-repeat;
  background-position: center center;
  background-size: 100% auto;
  padding-top: 2rem;
  box-sizing: border-box;
}

.header .info {
  font-size: .24rem;
  color: #ffffff;
  text-align: center;
}

.header .info > span:first-child {
  margin-right: 1rem;
}

.header .operation {
  text-align: center;
}

.header .share-btn, .header .invite-btn {
  width: 2rem;
  height: .5rem;
  border-radius: .25rem;
  background: #565f8f;
  outline: none;
  border: none;
  box-shadow: 1px 1px 1px 1px #ffffff;
  color: #ffffff;
}

.header .invite-btn {
  margin-right: .6rem;
}

.rule {
  font-size: .24rem;
  margin-top: .4rem;
}

.rule .title {
  font-size: .3rem;
  font-weight: bold;
  text-align: center;
  padding-left: 0;
}

.rule > p {
  padding-left: .24rem;
  line-height: 1.5em;
  margin: 0;
  color: #ffffff;
}